<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<!--
    toRefs: 
        使用解构的方式，会使得在 setup 中定义的数据失去响应式，如果需要重新得到响应式，需要使用到 toRefs
-->

<body>
    <div id="app"></div>
    <div id="modal"></div>
</body>
<script src="js/vue.js"></script>
<script>

    const app = Vue.createApp({
        setup(props, context) {
            const { reactive, toRefs } = Vue;

            let obj = reactive({ "name": "Tim", "sex": "男" });

            // const { name, sex } = obj;  // 如果是使用解构的方式，那么就失去响应式了

            // proxy({ "name": "Tim", "sex": "男" })  
            // --->  name:proxy({value: 'TIm'})  sex:proxy({value: '男'}) 
            const { name, sex } = toRefs(obj);  // 使用 toRefs 包装下，就可以重新获取响应式

            // 引用类型值
            setTimeout(() => {
                obj.name = "toRefs 属性";  // 下面使用 toRefs 之后，这里就可以重新修改了（因为已重新）

                // 也可以通过下面的方式修改
                // name.value = "toRefs 属性";  
                // sex.value = "女";
            }, 2000);
            
            return {
                msg: '组合式API - toRefs',
                name,
                sex
            }
        },

        template: `
        <div class="box">
          <h3> {{msg}} </h3>
          <div> 姓名：{{name}},  性别: {{sex}} </div>
        </div>
        `,
    }).mount("#app");

</script>

</html>
